<template>
	<div class="app-container">
		<h1 class="header">成绩查询系统</h1>
		<hr>

		<el-table
				v-loading="loading"
				:data="studentList"
				@selection-change="handleSelectionChange"
				class="student-table"
		>


			<el-table-column label="学生姓名" align="center" prop="name" />
			<el-table-column label="学生学号" align="center" prop="sno" />
			<el-table-column label="学生年级" align="center" prop="grade" />
			<el-table-column label="总分" align="center" prop="score" />

		</el-table>

		<pagination
				v-show="total > 0"
				:total="total"
				:page.sync="queryParams.pageNum"
				:limit.sync="queryParams.pageSize"
				@pagination="getList"
		/>


	</div>
</template>

<style scoped>
.app-container {
	padding: 20px;
	border-radius: 8px;
	background-color: #f9f9f9;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.header {
	text-align: center;
	margin-bottom: 50px;
	font-size: 50px;

	color: #333;
}

.form-container {
	margin-bottom: 20px;
}

.student-table {
	margin-top: 20px;
}

.el-table th {
	background-color: #fafafa;
	color: #666;
	font-weight: bold;
}

.el-table tr:hover {
	background-color: #f5f5f5;
}

.dialog-footer {
	text-align: right;
}

.el-button {
	margin-left: 8px;
}
</style>

<script>
import { allSysUserList,listStudent, getStudent, delStudent, addStudent, updateStudent } from "@/api/app/student";
import { useUserStore } from "@/store/modules/user";
const userStore = useUserStore();
export default {
	name: "Student",
	data() {
		return {
			sysUserList:[],
			// 遮罩层
			loading: true,
			// 选中数组
			ids: [],
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 显示搜索条件
			showSearch: true,
			// 总条数
			total: 0,
			// 学生表格数据
			studentList: [],
			// 弹出层标题
			title: "",
			// 是否显示弹出层
			open: false,
			// 查询参数
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				studentId: null,
				name: null,
				sno: null,
				grade: null,
				infoId: null,
				score: null
			},
			// 表单参数
			form: {},
			// 表单校验
			rules: {
			}
		};
	},
	created() {
		this.getList();
		this.getAllSysUserList();
	},
	methods: {
		async getAllSysUserList(){
			const res = await allSysUserList();
			this.sysUserList = res.data
			console.log(res)
		},
		/** 查询学生列表 */
		getList() {
			console.log(userStore)
			this.loading = true;
			this.queryParams.studentId = userStore.userId
			listStudent(this.queryParams).then(response => {
				this.studentList = response.data.list;
				this.total = response.data.total;
				this.loading = false;
			});
		},
		// 取消按钮
		cancel() {
			this.open = false;
			this.reset();
		},
		// 表单重置
		reset() {
			this.form = {
				id: null,
				name: null,
				sno: null,
				grade: null,
				infoId: null,
				score: null
			};

		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.pageNum = 1;
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.queryParams = {
				pageNum: 1,
				pageSize: 10,
				name: null,
				sno: null,
				grade: null,
				infoId: null,
				score: null
			},
					this.handleQuery();
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
			this.ids = selection.map(item => item.id)
			this.single = selection.length !== 1
			this.multiple = !selection.length
		},
		/** 新增按钮操作 */
		handleAdd() {
			this.reset();
			this.open = true;
			this.title = "添加学生";
		},
		/** 修改按钮操作 */
		handleUpdate(row) {
			this.reset();
			const id = row.id || this.ids
			getStudent(id).then(response => {
				this.form = response.data;
				this.open = true;
				this.title = "修改学生";
			});
		},
		toDetail(row){
			this.$router.push({
				path: '/studentDetail',
				query:{
					'data': JSON.stringify(row)
				}
			})
		},
		/** 提交按钮 */
		submitForm() {
			this.$refs["form"].validate(valid => {
				if (valid) {
					if (this.form.id != null) {
						updateStudent(this.form).then(response => {
							ElMessage({
								message: '修改成功',
								type: 'success',
							})
							this.open = false;
							this.getList();
						});
					} else {
						addStudent(this.form).then(response => {
							ElMessage({
								message: '新增成功',
								type: 'success',
							})

							this.open = false;
							this.getList();
						});
					}
				}
			});
		},
		/** 删除按钮操作 */
		async handleDelete(row) {
			const ids = row.id || this.ids;

			await delStudent(ids);

			await this.getList();
			ElMessage({
				message: '删除成功',
				type: 'success',
			})

		},

	}
};
</script>
